import Vue from 'vue'
import Vuex from 'vuex'
import Axios from 'axios'
import api from '../api'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    audio: {
      id: 0,
      name: '歌曲名称',
      singer: '演唱者',
      albumPic: '/static/placeholder_disk_play_program.png',
      location: '',
      album: ''
    },
    showDetail: false, // 歌曲播放界面是否打开
    playing: false, // 是否正在播放
    loading: false, // 是否正在加载中
    songList: [], // 播放列表
    currentIndex: 0, // 当前播放歌曲index，在songList
    listVisible: false, // 播放列表弹出层的显示与隐藏
    UrlList: [],
    currentTime: 0,
    tmpCurrentTime: 0,
    durationTime: 0,
    bufferedTime: 0,
    change: false // 判断是更改的时间还是播放的时间
  },
  mutations: {
    // 是否显示播放详情页
    toggleDetail(state) {
      state.showDetail = !state.showDetail
    },
    // 播放音乐
    play(state) {
      state.playing = true
    },
    // 暂停音乐
    pause(state) {
      state.playing = false
    },
    // 打开播放列表弹出层
    openSongList(state) {
      state.listVisible = true
    },
    // closeSongList(state) {
    //   state.listVisible = false
    // },
    // 请求成功前 ,正在加载中
    openLoading(state) {
      state.loading = true
    },
    closeLoading(state) {
      state.loading = false
    },
    setCurrentIndex(state) {
      state.currentIndex = 1
    },
    setNextAudioIndex(state) {
      state.currentIndex++
    },
    setAuidoIndex(state, index) {
      state.audio = state.songList[index]
      state.currentIndex = index + 1
    },
    setChange(state, flag) {
      state.change = flag
    },
    changeTime(state, time) {
      state.tmpCurrentTime = time
    },
    // 播放下一首
    playNextAudio(state) {
      state.currentIndex++
      state.audio = state.songList[state.currentIndex - 1]
    },
    setPreAudioIndex(state) {
      state.currentIndex--
    },
    playPreAudio(state) {
      state.currentIndex--
      state.audio = state.songList[state.currentIndex - 1]
    },
    // 更新歌曲缓冲的时间进度条
    updateBufferedTime(state, time) {
      state.bufferedTime = time
    },
    // 获取歌曲的总时长
    updateDurationTime(state, time) {
      state.durationTime = time
    },
    // 获取歌曲的当前播放位置的时间
    updateCurrentTime(state, time) {
      state.currentTime = time
    },
    // 播放哪首歌
    setAudio(state) {
      state.audio = state.songList[state.currentIndex - 1]
    },
    // 获取歌曲的地址
    setLocation(state, location) {
      // console.log(location)
      state.audio.location = location
      state.UrlList.unshift(location)
      // console.log(state.UrlList)
    },
    setAudioLocation(state, index) {
      state.audio.location = state.UrlList[index]
    },
    clearSongList(state) {
      state.songList = []
      state.audio.location = ''
    },
    // 点击歌曲 把相应歌曲添加到歌曲列表
    addToList(state, songs) {
      var items = Array.prototype.concat.call(songs)
      // console.log(items)
      items.forEach(item => {
        var flag = false
        state.songList.forEach(function(element, index) {
          // 检测歌曲重复
          if (element.id === item.id) {
            flag = true
            state.currentIndex = index + 1
            // console.log(state.songList)
            state.audio.location = ''
          }
        })
        if (!flag) {
          state.songList.unshift(item)
          state.currentIndex = 1
        }
      })
    },
    // 把歌曲地址存放到数组里 方便后续调用
    setUrlList(state, url) {
      state.UrlList.unshift(url)
    },
    // 重新播放歌曲
    rePlay(state) {
      state.prCurrentTime = 0
    }
  },
  getters: {
    audio: state => state.audio,
    playing: state => state.playing,
    loading: state => state.loading,
    showDetail: state => state.showDetail,
    durationTime: state => state.durationTime,
    currentIndex: state => state.currentIndex,
    bufferedTime: state => state.bufferedTime,
    tmpCurrentTime: state => state.tmpCurrentTime,
    songList: state => state.songList,
    change: state => state.change,
    currentTime: state => state.currentTime,
    listVisible: state => state.listVisible,
    UrlList: state => state.UrlList,
    prCurrentTime: state => {
      return (state.currentTime / state.durationTime) * 100
    },
    prBufferedTime: state => {
      return (state.bufferedTime / state.durationTime) * 100
    }
  },
  actions: {
    // 点击歌曲列表调取播放音乐接口
    async getSong({ commit, state }, id) {
      // 使用 CancelToken 退出一个Axios事件
      var CancelToken = Axios.CancelToken
      var source = CancelToken.source()
      if (state.loading && state.songList.length > 0) {
        console.log('cancel')
        source.cancel()
      }
      commit('openLoading')
      try {
        const { data } = await Axios.get(api.getSong(id))
        // console.log(data)
        const url = data[0].url
        // commit('setUrlList', url)
        // console.log(this.currentIndex)
        commit('setAudio')
        commit('setLocation', url)
      } catch (err) {
        this.$toast.fail('获取数据失败')
      }
    }
  },
  modules: {}
})
